<template>
  <!-- 订单管理页 -->
  <div>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="first">
          <!-- 产品名称输入框 -->
          <!-- {{orderData}} -->
          <!-- 第二菜单栏：订单编号、下单时间、总价、状态、顾客ID、员工ID、操作 -->
          <div class="title">
            <el-table :data="orderData" style="width: 100%">
              <el-table-column prop="id" label="订单编号" align="center" />
              <el-table-column prop="orderTime" label="下单时间" align="center">
                <template slot-scope="scope">
                  <span>{{
                    moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center" />
              <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                  <!--待派单-->
                  <el-tag
                    v-if="scope.row.status == '待派单'"
                    style="color: red"
                    type="danger"
                    plain
                    size="small"
                  >待派单
                  </el-tag>
                  <!-- 待接单 -->
                  <el-tag
                    v-if="scope.row.status == '待接单'"
                    style="color: #5f04b4"
                    type="text"
                    color="#E0E0F8"
                    size="small"
                  >待接单</el-tag>
                  <!-- 待服务 -->
                  <el-tag
                    v-if="scope.row.status == '待服务'"
                    plain
                    style="color: #ffbf00"
                    type="warning"
                    size="small"
                  >待服务</el-tag>
                  <!-- 待确认 -->
                  <el-tag
                    v-if="scope.row.status == '待确认'"
                    style="color: #04b431"
                    type="text"
                    color:none
                    size="small"
                  >待确认</el-tag>
                  <!-- 已完成 -->
                  <el-tag
                    v-if="scope.row.status == '已完成'"
                    type="text"
                    style="color: black"
                    size="small"
                    color="#FAFAFA"
                  >已完成</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="customerId"
                label="顾客ID"
                align="center"
              />
              <el-table-column
                prop="employeeId"
                label="员工ID"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- 所有状态 -->
                  <el-button
                    style="color: black"
                    type="text"
                    size="small"
                    @click="toOrder(scope.row.id)"
                  >详情</el-button>
                  <!-- 派单 -->
                  <el-button
                    v-if="scope.row.status == '待派单'"
                    style="color: red"
                    type="text"
                    size="small"
                    @click="clickSendorder(scope.row)"
                  >派单
                  </el-button>
                  <!-- 取消派单 -->
                  <el-button
                    v-else-if="scope.row.status == '待接单'"
                    type="text"
                    size="small"
                    style="color: #bf00ff"
                    @click="CancelSendorder(scope.row)"
                  >取消派单</el-button>
                  <!-- 待确认 -->
                  <el-button
                    v-if="scope.row.status == '待确认'"
                    style="color: #0b610b"
                    type="text"
                    size="small"
                    @click="confirmOrder(scope.row)"
                  >确认完成</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="待派单"
          name="second"
        ><div class="title">
           <el-table :data="orderData1" style="width: 100%">
             <el-table-column
               prop="orderLines[0].orderId"
               label="订单编号"
               align="center"
             />
             <el-table-column prop="orderTime" label="下单时间" align="center">
               <template slot-scope="scope">
                 <span>{{
                   moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                 }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="total" label="总价" align="center" />
             <el-table-column prop="status" label="状态" align="center" />
             <el-table-column
               prop="customerId"
               label="顾客ID"
               align="center"
             />
             <el-table-column
               prop="employeeId"
               label="员工ID"
               align="center"
             />
             <el-table-column label="操作" align="center">
               <template slot-scope="scope">
                 <!-- 派单 -->
                 <el-button
                   v-if="scope.row.status == '待派单'"
                   style="color: red"
                   type="text"
                   size="small"
                   @click="clickSendorder(scope.row)"
                 >派单
                 </el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage1"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="待接单" name="third">
          <div class="title">
            <el-table :data="orderData2" style="width: 100%">
              <el-table-column
                prop="orderLines[0].orderId"
                label="订单编号"
                align="center"
              />
              <el-table-column prop="orderTime" label="下单时间" align="center">
                <template slot-scope="scope">
                  <span>{{
                    moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center" />
              <el-table-column prop="status" label="状态" align="center" />
              <el-table-column
                prop="customerId"
                label="顾客ID"
                align="center"
              />
              <el-table-column
                prop="employeeId"
                label="员工ID"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    style="color: black"
                    type="text"
                    size="small"
                    @click="toOrder(scope.row.id)"
                  >详情</el-button>
                  <!-- 取消派单 -->
                  <el-button
                    v-if="scope.row.status == '待接单'"
                    type="text"
                    size="small"
                    style="color: #bf00ff"
                    @click="CancelSendorder(scope.row)"
                  >取消派单</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage2"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="待服务" name="fourth">
          <div class="title">
            <el-table :data="orderData3" style="width: 100%">
              <el-table-column
                prop="orderLines[0].orderId"
                label="订单编号"
                align="center"
              />
              <el-table-column prop="orderTime" label="下单时间" align="center">
                <template slot-scope="scope">
                  <span>{{
                    moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center" />
              <el-table-column prop="status" label="状态" align="center" />
              <el-table-column
                prop="customerId"
                label="顾客ID"
                align="center"
              />
              <el-table-column
                prop="employeeId"
                label="员工ID"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- 服务 -->
                  <el-button
                    style="color: black"
                    type="text"
                    size="small"
                    @click="toOrder(scope.row.id)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage3"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="待确认" name="fifth">
          <div class="title">
            <el-table :data="orderData4" style="width: 100%">
              <el-table-column
                prop="orderLines[0].orderId"
                label="订单编号"
                align="center"
              />
              <el-table-column prop="orderTime" label="下单时间" align="center">
                <template slot-scope="scope">
                  <span>{{
                    moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center" />
              <el-table-column prop="status" label="状态" align="center" />
              <el-table-column
                prop="customerId"
                label="顾客ID"
                align="center"
              />
              <el-table-column
                prop="employeeId"
                label="员工ID"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- 待确认 -->
                  <el-button
                    style="color: black"
                    type="text"
                    size="small"
                    @click="toOrder(scope.row.id)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize4"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage4"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="sixth">
          <div class="title">
            <el-table :data="orderData5" style="width: 100%">
              <el-table-column
                prop="orderLines[0].orderId"
                label="订单编号"
                align="center"
              />
              <el-table-column prop="orderTime" label="下单时间" align="center">
                <template slot-scope="scope">
                  <span>{{
                    moment(scope.row.orderTime).format("YYYY-MM-DD HH:mm:SS")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总价" align="center" />
              <el-table-column prop="status" label="状态" align="center" />
              <el-table-column
                prop="customerId"
                label="顾客ID"
                align="center"
              />
              <el-table-column
                prop="employeeId"
                label="员工ID"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- 待确认 -->
                  <el-button
                    style="color: black"
                    type="text"
                    size="small"
                    @click="toOrder(scope.row.id)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 底部分页区 -->
          <div class="pageinetion">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="pageSize5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage5"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 模态框 -->
      <el-dialog
        title="选择派给"
        :visible.sync="dialogVisible"
        @close="dialogClose"
      >
        <el-form label-width="100px" class="demo-ruleForm">
          <!-- 下拉框区域 -->
          <el-select v-model="waiterId" placeholder="请选择员工">
            <el-option
              v-for="waiters in waiterData.filter(
                (item) => item.roles != '员工'
              )"
              :key="waiters.id"
              :label="waiters.username"
              :value="waiters.id"
            />
          </el-select>
        </el-form>
        <!-- 按钮操作区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submitform"> 确 定 </el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
// 引入axios
import { get } from '@/utils/request'
// 引入vuex的辅助函数
import { mapActions, mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      // 订单数组-表格数据源
      // 所有订单
      orderData: [],
      // 每页要显示的数据条数
      pageSize: 8,
      // 页面展示数据的总条数
      totalPage: 10,

      status1: '待派单',
      orderData1: [],
      pageSize1: 8,
      totalPage1: 10,

      status2: '待接单',
      orderData2: [],
      pageSize2: 8,
      totalPage2: 10,

      status3: '待服务',
      orderData3: [],
      pageSize3: 8,
      totalPage3: 10,

      status4: '待确认',
      orderData4: [],
      pageSize4: 8,
      totalPage4: 10,

      status5: '已完成',
      orderData5: [],
      pageSize5: 8,
      totalPage5: 10,

      // 当前的页码
      currentPage: 1,
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      waiterId: '',
      orderId: '',
      // 订单时间
      orderTime: '',
      // Id:"",
      orderid: '',
      // 进入订单管理默认的标签页
      activeName: 'first'
    }
  },
  computed: {
    // 使用辅助函数
    ...mapState('sendorder', ['waiterData'])
  },
  created() {
    // 自动获取产品数据
    this.getAllorderData()
    this.getAllorderData1()
    this.getAllorderData2()
    this.getAllorderData3()
    this.getAllorderData4()
    this.getAllorderData5()
    // 自动获取员工数据
    this.queryWaiterData()
  },
  methods: {
    // 时间格式转换
    moment,
    // 调用vuex模块的方法
    ...mapActions('sendorder', ['getAllWaiterData']),
    // 获取所有订单数据
    async getAllorderData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res = await get('/order/pageQuery', data)
      // 将data中的订单数组进行赋值
      this.orderData = res.data.list
      // 页面总数据条数赋值
      this.totalPage = res.data.total
      console.log(this.orderData, '=====')
    },
    // 获取待派单订单数据
    async getAllorderData1() {
      // 获取参数
      const data1 = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.status1
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res1 = await get('/order/pageQuery', data1)
      // 将data中的订单数组进行赋值
      this.orderData1 = res1.data.list
      // 页面总数据条数赋值
      this.totalPage1 = res1.data.total
    },
    // 获取待接单订单数据
    async getAllorderData2() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.status2
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res2 = await get('/order/pageQuery', data)
      // 将data中的订单数组进行赋值
      this.orderData2 = res2.data.list
      // 页面总数据条数赋值
      this.totalPage2 = res2.data.total
      console.log(this.orderData2, this.totalPage2, ';ppppppppppp')
    },
    // 获取待服务订单数据
    async getAllorderData3() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.status3
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res3 = await get('/order/pageQuery', data)
      // 将data中的订单数组进行赋值
      this.orderData3 = res3.data.list
      // 页面总数据条数赋值
      this.totalPage3 = res3.data.total
    },
    // 获取待确认订单数据
    async getAllorderData4() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.status4
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res4 = await get('/order/pageQuery', data)
      // 将data中的订单数组进行赋值
      this.orderData4 = res4.data.list
      // 页面总数据条数赋值
      this.totalPage4 = res4.data.total
    },
    // 获取已完成订单数据
    async getAllorderData5() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.status5
      }
      // 通过对应的参数发送网络请求，获取订单数组数据
      const res5 = await get('/order/pageQuery', data)
      // 将data中的订单数组进行赋值
      this.orderData5 = res5.data.list
      // 页面总数据条数赋值
      this.totalPage5 = res5.data.total
    },
    // 派单操作
    clickSendorder(row) {
      this.dialogVisible = true
      this.orderId = row.orderLines[0].orderId
    },
    // 派单的确定按钮
    async submitform() {
      const data = {
        waiterId: this.waiterId,
        orderId: this.orderId
      }
      const res = await get('/order/sendOrder', data)
      console.log(res)
      this.dialogVisible = false
      this.getAllorderData1()
      this.getAllorderData()
    },
    // 取消派单
    async CancelSendorder(row) {
      this.orderId = row.orderLines[0].orderId
      const data = {
        orderId: this.orderId
      }
      console.log(data)
      const res = await get('/order/cancelSendOrder', data)
      this.getAllorderData()
      console.log(res)
    },
    // 接单按钮
    async takeOrder(row) {
      this.orderId = row.orderLines[0].orderId
      const data = {
        orderId: this.orderId
      }
      const res = await get('/order/takeOrder', data)
      this.getAllorderData()
      this.getAllorderData2()
      console.log(res)
    },
    // 服务按钮
    async serviceCompleteOrder(row) {
      this.orderId = row.orderLines[0].orderId
      const data = {
        orderId: this.orderId
      }
      const res = await get('/order/serviceCompleteOrder', data)
      this.getAllorderData()
      this.getAllorderData3()
      console.log(res)
    },
    // 确认订单
    async confirmOrder(row) {
      this.orderId = row.orderLines[0].orderId
      const data = {
        orderId: this.orderId
      }
      console.log(data)
      const res = await get('/order/confirmOrder', data)
      this.getAllorderData()
      this.getAllorderData4()
      console.log(res)
    },
    // 通过id跳转订单详情
    toOrder(id) {
      this.$router.push({
        // 路径
        path: '/admin/order/Details',
        // 参数的传递
        query: {
          id
        }
      })
    },
    // 控制每页数显示的据条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数进行更新
      this.pageSize = val
      this.pageSize1 = val
      this.pageSize2 = val
      this.pageSize3 = val
      this.pageSize4 = val
      this.pageSize5 = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // console.log(`每页 ${val} 条`);
    },
    // 监听当前页码变化
    handleCurrentChange(val) {
      // 将当前页数与分页插件动态点击控制页数相绑定
      this.currentPage = val
      // 重新调用获取所有订单数据的方法
      this.getAllorderData()
      this.getAllorderData1()
      this.getAllorderData2()
      this.getAllorderData3()
      this.getAllorderData4()
      this.getAllorderData5()
      // console.log(`当前页: ${val}`);
    },
    // 调用getAllWaiterData获取员工信息
    queryWaiterData() {
      // 定义参数
      const data1 = {
        page: 1,
        pageSize: 100
      }
      // 获取员工信息的方法
      this.getAllWaiterData(data1)
    },
    // 标签页
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 关闭模态框
    dialogClose() {
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    }
  }
}
</script>
<style scoped>
* {
  font-size: 18px;
  font-family: 楷体;
}
/* 分页区域 */
.pageinetion {
  position: fixed;
  bottom: 30px;
  right: 10px;
}
.el-tabs__item {
  font-size: 25px !important;
  line-height: 40px;
  margin-left: 50px;
}
.el-tag {
  font-size: 18px;
  line-height: 30px;
  height: 30px;
  width: 80px;
  border: none;
}
</style>
